<template>
	<view>
		<view v-for="(storeDto,storeIndex) in storeDtos" :key="storeIndex">
			<view class="uni-column uni-flex">
				<view class="uni-row uni-flex">
					<text class="uni-flex-item">店铺ID：{{storeDto.storeId}}</text>
					<text class="uni-flex-item" style="text-align: right;">{{storeDto.storeName}}</text>
				</view>
				<view class="uni-list">
					<view class="uni-flex-item" v-for="(commodityDto,serviceIndex) in storeDto.commodityDtos" :key="serviceIndex">
						<view class="uni-media-list" @click="goService(commodityDto.commodityId)">
							<image class="uni-media-list-logo" v-bind:src="commodityDto.commodityLogoUrl"></image>
							<view class="uni-media-list-body">
								<view class="uni-media-list-text-top">{{commodityDto.commodityName}}</view>
								<view class="uni-media-list-text-bottom uni-ellipsis">{{commodityDto.commodityDesc}}</view>
							</view>
							<view class="uni-media-list-body" style="align-items: center;">
								<view class="uni-text-small">{{commodityDto.commodityType}}</view>
								<view class="uni-text">{{commodityDto.price}}</view>
							</view>
							<view style="align-self: center;" class="uni-row" @click.stop>
								<uni-icons @click="deleteOneShoppingCart(storeDto.storeId,commodityDto.commodityId,storeIndex,serviceIndex)"
								 type="minus"></uni-icons>
								<text>{{commodityDto.count}}</text>
								<uni-icons @click="saveShoppingCart(storeDto.storeId,commodityDto.commodityId,storeIndex,serviceIndex)" type="plus"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-flex uni-row uni-flex-item" style="bottom: 90rpx;position: fixed;height: 90rpx;">
			<view class="uni-flex-item" style="align-self: center;">
				<text>{{totalPrice}}</text>
			</view>
			<view class="uni-flex-item" style="position: fixed;right: 0rpx; background-color: #FF3333;">
				<button type="primary" @click="createOrder()">提交订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '../../components/uni-icons/uni-icons.vue'

	export default {
		data() {
			return {
				storeDtos: [],
				totalPrice: 0,
			}
		},
		methods: {
			calcTotalPrice: function() {
				// 计算总价
				var totalPrice = 0;
				Object.entries(this.storeDtos).forEach((storeDto) => {
					Object.entries(storeDto[1].commodityDtos).forEach((serviceDto) => {
						totalPrice = totalPrice + (serviceDto[1].price * serviceDto[1].count);
					});
				});
				this.totalPrice = totalPrice.toFixed(2);
			},
			goService: function(commodityId) {
				uni.navigateTo({
					url: '../service/service?commodityId=' + commodityId
				});
			},
			saveShoppingCart: function(storeId, commodityId, storeIndex, serviceIndex) {
				this.storeDtos[storeIndex].commodityDtos[serviceIndex].count++;
				this.calcTotalPrice();
				this.$forceUpdate();

				uni.request({
					url: this.baseUrl + '/shoppingCart/save',
					method: 'POST',
					data: {
						customerUserId: 1,
						storeId: storeId,
						commodityId: commodityId
					}
				});
			},
			deleteOneShoppingCart: function(storeId, commodityId, storeIndex, serviceIndex) {
				this.storeDtos[storeIndex].commodityDtos[serviceIndex].count--;
				var serviceCount = this.storeDtos[storeIndex].commodityDtos[serviceIndex].count;
				if (serviceCount < 1) {
					this.storeDtos[storeIndex].commodityDtos.splice(serviceIndex, 1);
				}
				if (this.storeDtos[storeIndex].commodityDtos.length <= 0) {
					this.storeDtos.splice(storeIndex, 1);
				}
				this.calcTotalPrice();
				this.$forceUpdate();
				uni.request({
					url: this.baseUrl + '/shoppingCart/deleteOne',
					method: 'POST',
					data: {
						customerUserId: 1,
						storeId: storeId,
						commodityId: commodityId
					}
				});
			},
			createOrder: function() {
				uni.request({
					url: this.baseUrl + '/order/createByCustomerId',
					header: {
						'content-type': "application/x-www-form-urlencoded"
					},
					method: 'POST',
					data: {
						customerUserId: 1
					}
				});
				// TODO	跳转到订单详情页
			}

		},
		onLoad: async function(data) {
			await new Promise((resolve, reject) => {
				uni.request({
					url: this.baseUrl + '/shoppingCart/getShoppingCart',
					method: 'POST',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					data: {
						customerUserId: 1
					},
					success: res => {
						console.log(res.data.data);
						this.storeDtos = res.data.data;
						resolve('suc');
					}
				});
			});
			this.calcTotalPrice();

		},
		components: {
			uniIcons
		}
	}
</script>

<style>

</style>
